<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="css/swiper.css">
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/font-awesome.min.css">
  <link rel="stylesheet" href="css/style.css">
  <title>首页</title>
</head>

<body>
  <header>
    <div class="navigation">
      <nav class="navbar navbar-inverse">
        <!-- 手机头部按钮 -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"
            aria-controls="navbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav cross-effect" id="cross-effect">
            <li>
              <a href="">首页</a>
            </li>
            <li>
              <a href="">电影</a>
            </li>
            <li>
              <a href="">连续剧</a>
            </li>
            <li>
              <a href="">综艺</a>
            </li>
            <li>
              <a href="">动漫</a>
            </li>
            <li>
              <a href="">直播</a>
            </li>
          </ul>
          <form action="##" class="navbar-form navbar-left" rol="search">
            <div class="form-group">
              <input type="text" class="form-control" placeholder="请输入关键词" />
            </div>
            <button type="submit" class="btn btn-default">搜索</button>
          </form>
        </div>

      </nav>
    </div>

    <div class="swiper-container slider-swiper">
      <div class="swiper-wrapper slider-swiper-wrapper">
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination slider-swiper-pagination"></div>

    </div>
  </header>

  <main>
    <section class="list-container">
      <div class="list-wrapper">
        <h2 class="list-title">新片速递</h2>
        <div class="swiper-container list-swiper">
          <div class="swiper-wrapper list-swiper-wrapper new-movie-list">
          </div>
          <!-- Add Arrows -->
          <div class="swiper-button-next list-swiper-button-next"></div>
          <div class="swiper-button-prev list-swiper-button-prev"></div>
        </div>
      </div>
    </section>
    <section class="list-container">
      <div class="list-wrapper">
        <h2 class="list-title">华语院线</h2>
        <div class="swiper-container list-swiper">
          <div class="swiper-wrapper list-swiper-wrapper chinese-movie-list">
          </div>
          <!-- Add Arrows -->
          <div class="swiper-button-next list-swiper-button-next"></div>
          <div class="swiper-button-prev list-swiper-button-prev"></div>
        </div>
      </div>
    </section>
  </main>

  <footer>
    <div class="footer">
      免责声明:本站所有视频均来自互联网收集而来，版权归原创者所有，如果侵犯了你的权益，请通知我们，我们会及时删除侵权内容，谢谢合作。
    </div>
  </footer>
  <script src="js/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>

  <!-- 轮播图 -->
  <script src="js/swiper.js"></script>
  <script>
    //获取到轮播图照片后设置轮播图
    var ndSlider = [];
    $.get('http://192.168.191.5:3000/movies/rem', function (data) {
      for (var item of data.result.list) {
        ndSlider.push('<div class="swiper-slide"><a href=playing.html?m=' + item.movieId + '><img src="' + item.slideImg +
          '"></a></div>');
        // console.log(item);
      }
      $('.slider-swiper-wrapper').append(ndSlider);
      var swiper = new Swiper('.slider-swiper', {
        pagination: '.slider-swiper-pagination',
        paginationClickable: true,
        centeredSlides: true,
        autoplay: 2000,
        // 鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状
        grabCursor: true,
        //拖动Swiper时阻止click事件。
        preventLinksPropagation: true,
        autoplayDisableOnInteraction: false
      });
    })
    var ndNewMovie = [];
    var ndChineseMovie = [];
    $.get('http:///192.168.191.5:3000/movies', function (data) {
      for (var item of data.result.newList) {
        ndNewMovie.push('<div class="swiper-slide list-swiper-slider"><a href=playing.html?m=' + item.movieId +
          '><img class="list-img" src="' + item.img +
          '"></a></div>')
        console.log(item);
      }
      for (var item of data.result.chineseList) {
        ndChineseMovie.push('<div class="swiper-slide list-swiper-slider"><a href=playing.html?m=' + item.movieId +
          '><img class="list-img" src="' + item.img +
          '"></a></div>')
        console.log(item);
      }
      $('.new-movie-list').append(ndNewMovie);
      $('.chinese-movie-list').append(ndChineseMovie);
      new Swiper('.list-swiper', {
        nextButton: '.list-swiper-button-next',
        prevButton: '.list-swiper-button-prev',
        slidesPerView: 'auto',
        centeredSlides: true,
        paginationClickable: true,
        spaceBetween: 30,
      });
    })
  </script>
</body>

</html>